<template>
  <div id="app" class="aigc-page">
    <!-- 顶部导航栏 -->
    <el-header class="nav-bar">
      <div class="nav-left">
        <img src="@/assets/home/ai.svg" style="height: 50px" />
      </div>

      <!-- 右侧：导航项 + 登录/头像 -->
      <div class="nav-right">
        <div
          class="nav-item"
          :class="{ active: current === 'active1' }"
          @click="
            current = 'active1';
            scrollToSection('app');
          "
        >
          活动主页
        </div>
        <div
          class="nav-item"
          :class="{ active: current === 'active2' }"
          @click="
            current = 'active2';
            scrollToSection('intro');
          "
        >
          活动简介
        </div>
        <div
          class="nav-item"
          :class="{ active: current === 'active3' }"
          @click="
            current = 'active3';
            scrollToSection('zuopin');
          "
        >
          活动动态
        </div>
        <div
          class="nav-item"
          :class="{ active: current === 'active4' }"
          @click="
            current = 'active3';
            scrollToSection('dongtai');
          "
        >
          活动流程
        </div>

        <!-- 登录或头像 -->
        <div v-if="!isLoggedIn" class="nav-login" @click="goLogin">登录</div>

        <el-dropdown v-else @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar :size="32" :src="avatar" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">报名</el-dropdown-item>
            <el-dropdown-item command="logout" @click.native="logout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- Banner -->
    <div class="banner-container">
      <img src="@/assets/home/banner1.jpg" class="bg-img" />
    </div>

    <section class="active-list">
      <div class="item" v-for="(item, index) in activeList" :key="item.value">
        <div class="top">活动{{ index + 1 }}：{{ item.label }}</div>
        <div class="content">
          <div class="tex1">{{ item.text1 }}</div>
          <div class="tex2">{{ item.text2 }}</div>
        </div>
      </div>
    </section>

    <!-- 活动简介 -->
    <section class="section intro" id="intro">
      <img src="@/assets/home/jianjie.svg" class="jianjie-img" />
      <p>
        为贯彻落实国务院《新一代人工智能发展规划》和教育部等十八部门《关于加强新时代中小学科学教育工作的意见》等文件精神，进一步在教育“双减”中做好科学教育加法，向广大青少年普及人工智能科技，提高智能思维和解决问题能力，培养具备创新精神的人工智能后备人才，集中展示年度活动中涌现出的青少年人工智能创新实践优秀作品，搭建青少年、科技教师与高校专家、科技社团青年、人工智能科技企业创业者之间的交流平台，培养人工智能领域具备科研潜质和应用实践能力的创新型人才，促进青少年人工智能创新实践教育高质量普及开展，北京市科学技术协会和北京市门头沟区人民政府联合举办2025年北京青少年人工智能创新实践交流展示活动。
      </p>
      <p>
        本次活动旨在鼓励 AI
        创新内容创作，创作类别有：AI艺术生成、AI交互设计、AI工程实践、AI算法挑战、AI创新教学案例征集。
      </p>
    </section>

    <!--    &lt;!&ndash; 奖励设置 &ndash;&gt;-->
    <!--    <section class="section reward">-->
    <!--      <img src="@/assets/home/shezhi.svg" class="jianjie-img">-->
    <!--      <el-row :gutter="20">-->
    <!--        <el-col :span="8" v-for="item in rewards" :key="item.rank">-->
    <!--          <el-card>-->
    <!--            <h3>{{ item.rank }}</h3>-->
    <!--            <p>{{ item.amount }} 元</p>-->
    <!--          </el-card>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </section>-->

    <!-- 赛题主题 -->
    <!-- <section class="section topics">
      <img src="@/assets/home/zhuti.svg" class="jianjie-img" />
      <el-table :data="topics" border>
        <el-table-column prop="name" label="赛道" />
        <el-table-column prop="desc" label="说明" />
      </el-table>
    </section> -->

    <!-- 优秀作品 -->
    <section class="section works" id="zuopin">
      <img src="@/assets/home/yx-work.svg" class="jianjie-img" />
      <el-row :gutter="20">
        <el-col :span="8" v-for="work in works" :key="work.title">
          <el-card
            :body-style="{ padding: '10px' }"
            @click.native="openDialog(work)"
          >
            <img :src="work.image" class="work-img" />
            <div>{{ work.title }}</div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :destroy-on-close="true"
      class="video-dialog"
      @open="handleOpen"
      @close="handleClose"
    >
      <div class="video-container">
        <!-- 关闭按钮，浮在右上角 -->
        <div class="custom-close-btn" @click="closeDialog">关闭</div>
        <video
          ref="videoPlayer"
          class="video-player"
          v-if="selectedWork.video"
          :src="selectedWork.video"
          controls
          style="width: 100%; height: auto; display: block"
        ></video>
      </div>
    </el-dialog>

    <!-- 活动动态 -->
    <section id="dongtai" class="section news">
      <h2>活动流程</h2>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in news"
          :key="index"
          :timestamp="item.date"
        >
          {{ item.text }}
        </el-timeline-item>
      </el-timeline>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div>主办方：北京科学中心 &copy; 2025</div>
      <div>联系方式：beijingrgzn@163.com</div>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";
import A from "@/assets/home/1.jpg";
import B from "@/assets/home/2.jpg";
import C from "@/assets/home/3.jpg";
export default {
  data() {
    return {
      avatar: require("@/assets/home/avatar.jpeg"),
      current: "",
      isLoggedIn: false,
      rewards: [
        { rank: "一等奖", amount: 50000 },
        { rank: "二等奖", amount: 20000 },
        { rank: "三等奖", amount: 10000 },
      ],
      topics: [
        { name: "视频创作", desc: "结合AIGC模型进行创意视频内容输出" },
        { name: "图片生成", desc: "图文创作或海报设计" },
      ],
      guideSteps: [
        "了解大赛主题及方向",
        "选择合适的工具",
        "结合实际场景进行创作",
        "提交作品并填写信息",
      ],
      tools: [
        { name: "BlueLM", desc: "大语言模型平台" },
        { name: "多模态工具", desc: "图片、视频、语音生成工具" },
        { name: "模型训练平台", desc: "支持大模型微调" },
      ],
      works: [
        {
          title: "作品1",
          image: A,
          video:
            "https://aigc-fs.vivo.com.cn/cf-aigc-n/1%E3%80%81Weaver-%E7%BC%96%E7%BB%87%E7%94%9F%E6%B4%BB%EF%BC%8C%E4%BB%A5%E6%98%9F%E4%B8%BA%E5%9B%BE.mp4",
        },
        {
          title: "作品2",
          image: B,
          video:
            "https://aigc-fs.vivo.com.cn/cf-aigc-n/2%E3%80%81%E7%BB%98%E6%B8%B8%E6%88%8F%E2%80%94%E2%80%94%E5%9F%BA%E4%BA%8EAI%E6%99%BA%E8%83%BD%E4%BD%93%E7%9A%84%E5%8F%AF%E4%BA%A4%E4%BA%92%E5%BC%8F%E7%BB%98%E7%94%BB%E6%95%99%E8%82%B2%E6%B8%B8%E6%88%8F.mp4",
        },
        {
          title: "作品3",
          image: C,
          video:
            "https://aigc-fs.vivo.com.cn/cf-aigc-n/3%E3%80%81%E8%93%9D%E7%B2%BE%E7%81%B5%E4%BC%98%E6%B5%8B%20Smurfs%E2%80%94%E2%80%94%E6%96%B0%E6%A6%82%E5%BF%B5%E4%BD%93%E9%AA%8C%E6%B5%8B%E8%AF%95%E8%BE%85%E5%8A%A9%E5%B9%B3%E5%8F%B0.mp4",
        },
      ],
      news: [
        {
          date: "2025年5月",
          text: "2025年5月为前期筹备组织阶段。发布活动指南，明确作品要求及评价维度，并通过宣传分享优秀案例，激发广大参与者的积极性和创造力。区级组织单位积极响应，广泛发动区内学生和教师准备AI作品。",
        },
        {
          date: "2025年6月-7月",
          text: "2025年6月-7月为作品申报和初评活动组织阶段。组织项目申报、资格审查、线上初评，确定活动线下活动名单。",
        },
        {
          date: "2025年8月-10月",
          text: "2025年8月-10月为终评活动组织阶段。举办线下优秀作品成果展示、AI创新教学案例交流、专家指导交流、现场任务挑战、公开展示等活动。根据选手作品展示和现场任务 完成情况遴选活动卓越作品。",
        },
        {
          date: "2025年11月-12月",
          text: "2025年11月-12月为总结阶段。总结研讨，编制下一届活动指南等。",
        },
      ],
      activeList: [
        {
          label: "AI艺术生成",
          value: 1,
          text1: "传统文化的“创新创造”",
          text2:
            "利用AI赋能文化艺术，探索艺术与科技融合创新路径，培养青少年创新应用能力及审美素养",
        },
        {
          label: "AI交互设计",
          value: 2,
          text1: "“对话”中华文明",
          text2:
            "利用AI赋能文化艺术，探索艺术与科技融合创新路径，培养青少年创新应用能力及审美素养",
        },
        {
          label: "AI工程实践",
          value: 3,
          text1: "生活中的机器助手",
          text2:
            "利用软硬件融合模式，探索符合青少年认知特点的AI工程实践路径，培养青少年运用AI技术解决真实问题的操作能力和思维能力。",
        },
        {
          label: "AI算法挑战",
          value: 4,
          text1: "数智北京",
          text2:
            "利用算法、可视化数据处理工具，探索跨学科算法应用模式，培养科学素养和批判性思维",
        },
        {
          label: "AI创新教学案例征集",
          value: 5,
          text1: "数智教育",
          text2:
            "以AI赋能科学教育，利用人工智能、虚拟现实等新技术开展实验教学，推动数据、算法、算力在教学场景中的深度融合应用。",
        },
      ],

      dialogVisible: false,
      selectedWork: {},
      video: null,
    };
  },
  mounted() {
    const token = sessionStorage.getItem("Admin-Token");
    this.isLoggedIn = token ? true : false;
  },
  watch: {
    $route(to) {
      // 只要进入本页面，就执行初始化（无论是不是同一路径）
      if (to.path === this.$route.path) {
        const token = sessionStorage.getItem("Admin-Token");
        this.isLoggedIn = token ? true : false;
      }
    },
    isLoggedIn(newVal) {
      console.log("登录状态变化:", newVal);
    },
  },
  methods: {
    scrollToSection(id) {
      const el = document.getElementById(id);
      wwwwwwwwwwwwwww;
      if (el) {
        el.scrollIntoView({ behavior: "smooth" }); // 平滑滚动
      }
    },

    openDialog(work) {
      return;
      this.selectedWork = work;
      this.dialogVisible = true;
    },
    handleOpen() {
      // 打开后播放视频
      this.$nextTick(() => {
        const video = this.$refs.videoPlayer;
        if (video) video.play();
      });
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleClose() {
      const video = this.$refs.videoPlayer;
      console.log(111);
      console.log(video);
      if (video) {
        video.pause(); // 暂停播放
        video.currentTime = 0; // 回到开头
      }
    },
    goLogin() {
      if (this.$route.path !== "/login") {
        this.$router.push("/login");
      }
    },
    goAbout() {
      this.$router.push({ path: "/groupPage" });
    },
    handleCommand(command) {
      if (command === "profile") {
        this.$router.push("/index");
      } else if (command === "logout") {
        this.logout(); // 调用退出函数
      }
    },
    logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/home";
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
/* 激活状态，加下划线 */
.nav-item .active {
  border-bottom: 2px solid white;
  color: white;
}

.video-container {
  position: relative;
  width: 100%;
}

/* 视频本身 */
.video-player {
  width: 100%;
  height: auto;
  background: black;
  border-radius: 0;
}

/* 自定义关闭按钮 */
.custom-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
}

.custom-close-btn:hover {
  background-color: rgba(255, 0, 0, 0.7);
}

.video-dialog >>> .el-dialog {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.video-dialog >>> .el-dialog__header {
  display: none;
  /* 去掉标题 */
}

.video-dialog >>> .el-dialog__body {
  padding: 0;
  background: transparent;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-dialog >>> video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
  background: black;
  /* 防止加载中显示白底 */
}

video {
  border-radius: 0 !important;
  /* 可能影响内部内容的视觉 */
}

.jianjie-img {
  width: 314px;
  height: 60px;
  margin: 0 auto 52.41px;
  display: block;
}

.shezhi-img {
  width: 314px;
  height: 60px;
  margin: 0 auto 52.41px;
  display: block;
}

.bg-img {
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  padding-left: 5%;
  box-sizing: border-box;
}

.overlay .title-1 {
  font-size: clamp(10px, 2vw, 28px);
  line-height: 1.5;
  color: #fffffff5;
}

.overlay .title-2 {
  font-size: clamp(16px, 10vw, 50px);
  font-weight: 750;
  line-height: 1.5;
  color: #fff;
}

.el-menu--horizontal.el-menu {
  border-bottom: 0;
}

.bg-img {
  width: 100%;
  display: block;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

.aigc-page {
  font-family: "Helvetica Neue", sans-serif;
  color: #333;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #001f3f;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-item {
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
  margin-right: 40px;
}

.banner {
  background: linear-gradient(to right, #0052d9, #1890ff);
  /* background-image: url('@assets/home/banner.jpg'); */
  color: white;
  text-align: center;
  /* padding: 60px 20px; */
}

.section {
  padding: 60px 20px;
  background: #f9f9f9;
  // margin-bottom: 20px;
}

.active-list {
  background: #f9f9f9;
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 24px;
  padding: 48px 24px 24px;
  justify-content: space-around;

  .item {
    width: 330px;
    background: linear-gradient(180deg, #e9fbff 0%, #ffffff 100%);
    box-shadow: 0px 0px 17px 0px rgba(169, 190, 214, 0.17);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12px;
    padding: 24px;
    cursor: pointer;
    border-radius: 8px;

    .top {
      font-size: 20px;
      font-weight: bold;
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 12px;

      .tex1 {
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
}

.footer {
  background: #001f3f;
  color: #fff;
  padding: 30px;
  text-align: center;
}

.work-img {
  width: 100%;
  height: 450px;
  margin-bottom: 10px;
}

.nav-login {
  cursor: pointer;
}
</style>